<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" href="assets/img/favicon.png">	
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Get Shit Done Kit by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
	
    <link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
	<link href="assets/css/gsdk.css" rel="stylesheet" />  
    <link href="assets/css/demo.css" rel="stylesheet" /> 
    
    <!--     Font Awesome     -->
    <link href="bootstrap3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navbar-full">
    <div class="container">
        <nav class="navbar navbar-ct-blue navbar-transparent navbar-fixed-top" role="navigation">
          
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="http://creative-tim.com">
                     <div class="logo-container">
                        <div class="logo">
                            <img src="assets/img/new_logo.png">
                        </div>
                        <div class="brand">
                            Creative Tim
                        </div>
                    </div>
                </a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                    <li><a href="components.html">Components</a></li>
                    
                    <li><a href="http://www.creative-tim.com/product/get-shit-done-kit" class="btn btn-round btn-default">Download</a></li>
               </ul>
              
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div><!--  end container-->
    
    <div class='blurred-container'>
        <div class="motto">
            <div>Get</div>
            <div class="border no-right-border">Sh</div><div class="border">it</div>
            <div>Done</div>
        </div>
        <div class="img-src" style="background-image: url('assets/img/cover_4.jpg')"></div>
        <div class='img-src blur' style="background-image: url('assets/img/cover_4_blur.jpg')"></div>
    </div>
    
</div>     
    


<div class="main">
    <div class="container tim-container">
       
        <div class="tim-title">
            <h2>Basic Elements</h2>
        </div>
        
        <div id="buttons">
                <div class="tim-title">
                    <h3>Buttons <small> Pick your class </small></h3>
                </div>
                
                <div class="row tim-row">
                    <div class="col-md-6">
                        <div class="pick-class">
                            <span class="pick-class-label label-default label-fill label-tooltip" data-toggle="tooltip" data-placement="top" title="Default" new-class="btn-default"> </span>
                            <span class="pick-class-label label-primary label-fill label-tooltip" data-toggle="tooltip" data-placement="top" title="Primary" new-class="btn-primary"> </span>
                            <span class="pick-class-label label-info label-fill label-tooltip" data-toggle="tooltip" data-placement="top" title="Info" new-class="btn-info"> </span>
                            <span class="pick-class-label label-success label-fill label-tooltip" data-toggle="tooltip" data-placement="top" title="Success" new-class="btn-success"> </span>
                            <span class="pick-class-label label-warning label-fill label-tooltip" data-toggle="tooltip" data-placement="top" title="Warning" new-class="btn-warning"> </span>
                            <span class="pick-class-label label-danger label-fill label-tooltip" data-toggle="tooltip" data-placement="top" title="Danger" new-class="btn-danger"> </span>
                        </div>
                    </div>
                </div>
                <div class="row tim-row" id="display-buttons" data-class="btn-info">
                    <div class="col-md-3 col-sm-6">
                        <button href="#fakelink" class="btn btn-block btn-lg btn-info">Default Button</button>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <button href="#fakelink" class="btn btn-block btn-lg btn-info btn-fill">Filled Button</button>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <button href="#fakelink" class="btn btn-block btn-lg btn-info btn-round">Rounded Button</button>
                    </div>
                    
                    <div class="col-md-3 col-sm-6">
                        <button href="#fakelink" class="btn btn-block btn-lg btn-info btn-simple">Simple Button</button>
                    </div>
                </div> <!-- end row -->               
        </div>
    <!-- end buttons div -->
    
        <div id="inputs">
            <div class="tim-title">
                <h3>Inputs</h3>
            </div>
            
             <div class="row">
                    <div class="col-sm-3">
                	<div class="form-group">
        	        	<input type="text" value="" placeholder="Inactive" class="form-control" />
                	</div>          
                </div>
                
                <div class="col-sm-3">
                  <div class="form-group has-success">
                    <input type="text" value="Success" class="form-control" />
                  </div>
                </div>
                
                <div class="col-sm-3">
                  <div class="form-group has-error has-feedback">
                    <input type="text" value="Error" class="form-control" />
                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                  </div>
                </div>
    
                <div class="col-sm-3">
                	<div class="input-group">
                	<!-- 	   Since the css properties cannot check the previous sibling of an element and for the design consistency we recommend to use the "input-group-addon" after the "form-control" like in this example -->
                      <input type="text" value="Group Addon" class="form-control">
                      <span class="input-group-addon"><i class="fa fa-group"></i></span>
                    </div>       
                </div>
              </div> <!-- end row -->
            
            <div class="row">
                <div class="col-sm-3">
                    <div class="tim-title">
                        <h3>Checkboxes</h3>
                    </div>
                    
                      <label class="checkbox" for="checkbox1">
                        <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
                        Unchecked
                      </label>
                      <label class="checkbox" for="checkbox2">
                        <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>
                        Checked
                      </label>
                      <label class="checkbox" for="checkbox3">
                        <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled>
                        Disabled unchecked
                      </label>
                      <label class="checkbox" for="checkbox4">
                        <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" disabled checked>
                        Disabled checked
                      </label>
                </div>
                
                <div class="col-sm-3">
                    <div class="tim-title">
                        <h3>Radio Buttons</h3>
                    </div>
                    
                       <label class="radio">
                        <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios1" value="option1">
                        <i></i>Radio is off
                      </label>
                      <label class="radio">
                        <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios2" value="option1" checked>
                        <i></i>Radio is on
                      </label>
            
                      <label class="radio">
                        <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios3" value="option2" disabled>
                        <i></i>Disabled radio is off
                      </label>
                      <label class="radio">
                        <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios4" value="option2" checked disabled>
                        <i></i>Disabled radio is on
                      </label>
                    
                </div>      
                
                <div class="col-sm-3">
                    <div class="tim-title">
                        <h3>Switches</h3>
                        <!--                    
                        
                        The colors for checkbox: ct-blue[default], ct-azure, ct-orange, ct-green, ct-red    
                        <input type="checkbox" checked data-toggle="switch" class="ct-red"/> 
                         
                         -->
                        <input type="checkbox" checked data-toggle="switch" class="ct-info"/>
                        <input type="checkbox" data-toggle="switch" />
                        <h3>Switches with icons</h3>
                        <div class="switch"
                          data-on-label="<i class='fa fa-check'></i>"
                          data-off-label="<i class='fa fa-times'></i>">
                          <input type="checkbox" checked/>
                        </div>
                        <div class="switch"
                          data-on-label="<i class='fa fa-check'></i>"
                          data-off-label="<i class='fa fa-times'></i>">
                          <input type="checkbox"/>
                        </div>
                    </div>
                </div> 
  
                <div class="col-sm-3">
                   
                </div>               
                    
            </div><!--  end row -->
    
        </div><!--  end inputs -->
        
        <div id="menu-dropdown">
            <div class="row">
                <div class="col-md-7">
                    <div class="tim-title">
                        <h3>Menu & Dropdown</h3>
                    </div>
                    
                    <div id="navbar">
                        <nav class="navbar navbar-default">
                          <div class="container-fluid">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button>
                              <a class="navbar-brand" href="#gsdk">Brand</a>
                            </div>
                        
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                              <ul class="nav navbar-nav">
                                <li class="active"><a href="#gsdk">Link</a></li>
                                <li><a href="#gsdk">Link</a></li>
                                <li class="dropdown">
                                  <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                  <ul class="dropdown-menu">
                                    <li><a href="#gsdk">Action</a></li>
                                    <li><a href="#gsdk">Another action</a></li>
                                    <li><a href="#gsdk">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#gsdk">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#gsdk">One more separated link</a></li>
                                  </ul>
                                </li>
                              </ul>
                            </div><!-- /.navbar-collapse -->
                          </div><!-- /.container-fluid -->
                        </nav>
                    
                    </div><!--  end navbar -->
                    
                </div>
                
            </div> <!-- end row -->
        </div> <!-- end menu-dropdown -->
        <div class="tim-title">
        <h3>Transparent Navigation
             <a href="navbar-transparent.html" target="_blank" class="btn btn-info btn-fill">Live Preview</a>
        </h3>


    </div>
    </div>
</div>
 <div id="navbar-full">
    <div id="navbar">
    <div class="navigation-example">
         <nav class="navbar navbar-default navbar-transparent" role="navigation-demo">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#gsdk">GSDKit</a>
            </div>
        
        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navigation-example-2">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#gsdk">Link</a></li>
                <li class="dropdown">
                      <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#gsdk">Action</a></li>
                        <li><a href="#gsdk">Another action</a></li>
                        <li><a href="#gsdk">Something</a></li>
                        <li><a href="#gsdk">Another action</a></li>
                        <li><a href="#gsdk">Something</a></li>
                        <li class="divider"></li>
                        <li><a href="#gsdk">Separated link</a></li>
                      </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" data-toggle="search" class="hidden-xs"><i class="fa fa-search"></i></a>
                </li>
              </ul>
               <form class="navbar-form navbar-left navbar-search-form" role="search">                  
                 <div class="form-group">
                      <input type="text" value="" class="form-control" placeholder="Search...">
                 </div> 
              </form>
              <ul class="nav navbar-nav navbar-right">
                    <li><a href="#gsdk">Register</a></li>
                    
                    <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li>
               </ul>
              
            </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->
        </nav>        
            <div class="img-src" style="background-image: url('assets/img/bg.jpg')"></div>
        </div>
    </div><!--  end navbar -->

</div> <!-- end menu-dropdown -->

<div class="main">
    <div class="container tim-container">
         <div id="sliders-navigation">
            <div class="row">
                <div class="col-md-6 ">
                    <div class="tim-title">
                        <h3>Progress Bars</h3>
                    </div>
                    <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                        <span class="sr-only">60% Complete</span>
                      </div>
                    </div>
                    <div class="progress">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60% Complete</span>
                      </div>
                    </div>
                    <div class="progress">
                      <div class="progress-bar progress-bar-success" style="width: 35%">
                        <span class="sr-only">35% Complete (success)</span>
                      </div>
                      <div class="progress-bar progress-bar-warning" style="width: 20%">
                        <span class="sr-only">20% Complete (warning)</span>
                      </div>
                      <div class="progress-bar progress-bar-danger" style="width: 10%">
                        <span class="sr-only">10% Complete (danger)</span>
                      </div>
                    </div>
                    <div class="tim-title">
                        <h3>Sliders</h3>
                    </div>
                    <div id="slider-default" class="slider-info"></div>
                    <br>
                    <div id="slider-range" class="slider-success"></div>
                    
                </div>
                
                <div class="col-md-6">
                     <div class="tim-title">
                        <h3>Navigation Menu</h3>
                    </div>    
                    
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#Bla">Home</a></li>
                      <li><a href="#nice">Profile</a></li>
                      <li><a href="#best">Messages</a></li>
                      
                    </ul>
                    <br />
                    <ul class="nav nav-pills">
                     <!--  color-classes: "ct-blue", "ct-azure", "ct-orange", "ct-red", "ct-green"
                           special-classes: "no-border"        
                     -->
                      <li class="active"><a href="#gsdk">Home</a></li>
                      <li><a href="#gsdk"> Profile</a></li>
                      <li><a href="#gsdk">Messages</a></li>
                    </ul>
                    
                    <div class="tim-title">
                        <h3>Pagination</h3>
                    </div>  
                    <ul class="pagination"> 
                     <!--   color-classes: "ct-blue", "ct-azure", "ct-orange", "ct-red", "ct-green"
                            special-classes: "no-border"        
                     -->
                      <li><a href="#gsdk">&laquo;</a></li>
                      <li><a href="#gsdk">1</a></li>
                      <li><a href="#gsdk">2</a></li>
                      <li class="active"><a href="#gsdk">3</a></li>
                      <li><a href="#gsdk">4</a></li>
                      <li><a href="#gsdk">5</a></li>
                      <li><a href="#gsdk">&raquo;</a></li>
                    </ul>      
                </div>
            </div>
        </div><!--  end sliders-navigation -->
        
        
        <div id="labels-badges">
            <div class="row">
                <div class="col-md-6">
                    <div class="tim-title">
                        <h3>Labels</h3>
                        <span class="label label-default">Default</span>
                        <span class="label label-primary">Primary</span>
                        <span class="label label-success">Success</span>
                        <span class="label label-info">Info</span>
                        <span class="label label-warning">Warning</span>
                        <span class="label label-danger">Danger</span>
                    </div>
                </div>
                <div class="col-md-6">
                </div>
            </div> <!-- end row -->
        </div> <!-- end labels-badges -->
        <div class="tim-title">
            <h3>Notifications</h3>
        </div> 
    </div>
</div>

<div id="notifications">
<!--            De scris la tutorial sa bage in container  -->
    <div class="alert alert-success">
        <div class="container">
        <b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
    <div class="alert alert-info">
        <div class="container">
        <b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
    <div class="alert alert-warning">
         <div class="container">
             <b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
    <div class="alert alert-danger">
         <div class="container">
             <b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
    <div class="clearfix"></div>
</div><!--  end notifications -->    
        
<div class="main">
    <div class="container tim-container">
        <div class="tim-title">
            <h2>Typography</h2>
        </div>   
        <div id="typography">
            <div class="row">
                <div class="tim-typo">
                    <h1><span class="tim-note">Header 1</span>Awesome looking header </h1>
                </div>
                <div class="tim-typo">
                    <h2><span class="tim-note">Header 2</span>Awesome looking header</h2>
                </div>
                <div class="tim-typo">
                    <h3><span class="tim-note">Header 3</span>Awesome looking header</h3>
                </div>
                <div class="tim-typo">
                    <h4><span class="tim-note">Header 4</span>Awesome looking header</h4>
                </div>
                <div class="tim-typo">
                    <h5><span class="tim-note">Header 5</span>Awesome looking header</h5>
                </div>
                 <div class="tim-typo">
                    <h6><span class="tim-note">Header 6</span>Awesome looking header</h6>
                </div>
                <div class="tim-typo">
                    <p><span class="tim-note">Paragraph</span>            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
                </div>
                <div class="tim-typo">
                    <span class="tim-note">Quote</span>      
                    <blockquote> 
                     <p>
                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
                     </p>
                     <small>
                     Steve Jobs, CEO Apple
                     </small>
                    </blockquote>
                </div>
                
                <div class="tim-typo">
                    <span class="tim-note">Muted Text</span>
                    <p class="text-muted">            
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
                    </p>
                </div> 
                <div class="tim-typo">
                    <!-- 
                    
                     there are also "text-info", "text-success", "text-warning", "text-warning" clases for the text 
                     
                     -->
                    <span class="tim-note">Primary Text</span>
                    <p class="text-primary">            
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
                    </p>
                </div> 
                <div class="tim-typo">
                    <h1><span class="tim-note">Special Header</span>Header with special subtitle <small class="subtitle">".subtitle" is a special class for h1 title</small> </h1>
                </div>
                <div class="tim-typo">
                    <h2><span class="tim-note">Small Tag</span>Header with small subtitle <br><small>".small" is a tag for the headers</small> </h2>
                </div>                                  
            </div>
        </div> 
        <!--   end typography -->
        <div class="space"></div>
        <div id="images">
             <div class="tim-title">
                <h2>Images</h2>
            </div>
            <br>
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <h4>Rounded Image</h4>
                    <img src="assets/img/mockup.png" alt="Rounded Image" class="img-rounded">
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <h4>Circle Image</h4>
                    <img src="assets/img/mockup.png" alt="Circle Image" class="img-circle">
                   
                </div>
                <div class="col-md-4 col-sm-6">
                    <h4>Thumbnail Image</h4>
                    <img src="assets/img/mockup.png" alt="Thumbnail Image" class="img-thumbnail">
                    
                </div>
            </div>
            <div class="row">
            
            </div>
        </div>  
    <!--   end images -->
        
        <div class="tim-title">
            <h2>Javascript components</h2>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="tim-title">
                    <h3>Modal</h3>
                </div>
                
                <!-- Button trigger modal -->
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                  Launch demo modal
                </button>
                
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                      </div>
                      <div class="modal-body">
                        ...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
                        <div class="divider"></div>
                        <button type="button" class="btn btn-info btn-simple">Save</button>
                      </div>
                    </div>
                  </div>
                </div>
                
                
            </div>
            
         <!--    end modal -->
            
            <div class="col-md-6">
                <div id="tooltips">
                    <div class="tim-title">
                        <h3>Tooltips</h3>
                    </div>
                    <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
        
        <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
        
        <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
        
        <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
                </div>
            </div>
            <div class="clearfix"></div><br><br>
        <!--     end tooltips -->
            
        </div><!--  end row -->
    
        <div class="tim-title">
            <h3>Collapse</h3>
        </div>
        <div id="acordeon">
            
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-target="#collapseOne" href="#collapseOne" data-toggle="gsdk-collapse">
                      GSDK Collapsible Item 1
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-target="#collapseTwo" href="#collapseTwo" data-toggle="gsdk-collapse">
                      GSDK Collapsible Item 2
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-target="#collapseThree" href="#collapseTwo" data-toggle="gsdk-collapse">
                      GSDK Collapsible Item 3
                    </a>
                  </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapseFour">
                      Default Collapsible Item 1
                    </a>
                  </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapseFive">
                      Default Collapsible Item 2
                    </a>
                  </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
            </div>
            
        </div><!--  end acordeon -->
        
        <div class="space"></div>
        <div class="tim-title">
            <h3>Carousel</h3>
        </div>
    </div>
</div>
<div id="carousel">
    <!--    
            IMPORTANT - This carousel can have a special class for a smooth transition "gsdk-transition". Since javascript cannot be overwritten, if you want to use it, you can use the bootstrap.js or bootstrap.min.js from the GSDKit or you can open your bootstrap.js file, search for "emulateTransitionEnd(600)" and change it with "emulateTransitionEnd(1200)"     
            
    -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="assets/img/carousel_blue.png" alt="Awesome Image">
        </div>
        <div class="item">
          <img src="assets/img/carousel_green.png" alt="Awesome Image">
        </div>
        <div class="item">
          <img src="assets/img/carousel_red.png" alt="Awesome Image">
        </div>
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="fa fa-angle-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="fa fa-angle-right"></span>
      </a>
    </div>
</div> <!-- end carousel -->
<div class="main">
    <div class="container tim-container">
        <div id="extras">
            <div class="space"></div>
            <div class="row">
                <div class="col-md-7 col-md-offset-0 col-sm-10 col-sm-offset-1">
                    <div class="text-center">
                        <img src="assets/img/dulau.jpg" alt="Rounded Image" class="img-rounded img-responsive img-dog">
                    </div>
                </div>
                <div class="col-md-5 col-sm-12">
                                <h1 class="text-center">About Creative Tim
                                
                                <small class="subtitle">Get to know us</small></h1>
                                <hr>
                                <p>
                                Creative Tim offers Bootstrap based design elements that speed up your development work. From plugins to complex kits, we have everything you need. 
                                </p>
                                <p>
                                    We love the web and care deeply for how users interact with a digital product. The idea behind Creative Tim was creating a standard of things we actually need and would personally use inside our web projects. We power businesses and individuals to create better looking web projects around the world.
                                </p>
                                <p>
                                We take great interest in how our customers use our resources and offer strong support and unlimited updates. We are constantly thinking about how to make our products intuitive, beautiful and extremely easy to understand, so feel free to tell us your thoughts!                                   
                                </p>

                </div>
            </div>
        </div>
    <!--     end extras -->    
    </div>
<!-- end container -->
<div class="space-30"></div>
</div>


<!-- end main -->

<div class="parallax-pro">
    <div class="img-src" style="background-image: url('http://get-shit-done-pro.herokuapp.com/assets/img/bg6.jpg');"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>
                    <small>
                       Don't forget to check our latest release:<a>
                    </small>
                </h1>
            </div>
            <div class="col-md-6 col-md-offset-3 col-md-12 text-center">
                <h1 class="hello text-center">
                   <a href="http://gsdk.creative-tim.com">Get Shit Done Kit <span class="label label-warning"> Pro</span></a>
                   <small>
                    <ul class="list-unstyled">
                        <li>50+ new elements</li>
                        <li>LESS and SASS files</li>
                        <li>PSD for designers</li>
                        <li>New Font Icons </li>
                    </ul>
                    </small>
                </h1>
                 <div class="actions">
                     <a class="btn btn-lg btn-warning btn-fill" href="http://gsdk.creative-tim.com/?ref=get-shit-done">Live Preview Kit</a>
                </div>
            </div>
        </div>
        <div class="space-30"></div>
        <div class="row">
             <div class="col-md-12 text-center">
                <div class="credits">
                    &copy; <script>document.write(new Date().getFullYear())</script> Get Shit Done Kit by <a href="http://creative-tim.com"> Creative Tim</a>, made with <i class="fa fa-heart heart" alt="love"></i> for a better web.
                </div>
            </div>
        </div>
    </div>

</div>

</body>

    <script src="jquery/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="assets/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>

	<script src="bootstrap3/js/bootstrap.js" type="text/javascript"></script>
	<script src="assets/js/gsdk-checkbox.js"></script>
	<script src="assets/js/gsdk-radio.js"></script>
	<script src="assets/js/gsdk-bootstrapswitch.js"></script>
	<script src="assets/js/get-shit-done.js"></script>
    <script src="assets/js/custom.js"></script>

<script type="text/javascript">
         
    $('.btn-tooltip').tooltip();
    $('.label-tooltip').tooltip();
    $('.pick-class-label').click(function(){
        var new_class = $(this).attr('new-class');  
        var old_class = $('#display-buttons').attr('data-class');
        var display_div = $('#display-buttons');
        if(display_div.length) {
        var display_buttons = display_div.find('.btn');
        display_buttons.removeClass(old_class);
        display_buttons.addClass(new_class);
        display_div.attr('data-class', new_class);
        }
    });
    $( "#slider-range" ).slider({
		range: true,
		min: 0,
		max: 500,
		values: [ 75, 300 ],
	});
	$( "#slider-default" ).slider({
			value: 70,
			orientation: "horizontal",
			range: "min",
			animate: true
	});
	$('.carousel').carousel({
      interval: 4000
    });
      
    
</script>
</html>